<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <!-- 搜索 -->
        <el-date-picker v-model="selectDate" class="filter-item" type="month" placeholder="选择月" />
        <rrOperation :crud="crud" />
        <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
        <span slot="right" class="filter-item" style="margin-left: 600px;">失能人员：{{ this.bisZhsqSnryXm }}</span>
      </div>
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" title="分配护理员" width="330px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="140px">
          <el-form-item label="护理人员">
            <el-select
              v-model="form.bisOrderHlyName"
              style="width: 100px"
              @change="change"
            >
              <el-option
                v-for="item in allHlry"
                :key="item.key"
                :label="item.name"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column align="center" prop="bisOrderHlrq" label="护理日期" />
        <el-table-column align="center" prop="bisOrderHlyName" label="护理员姓名" />
        <el-table-column align="center" prop="bisOrderStartTime" label="起始钟点" />
        <el-table-column align="center" prop="bisOrderEndTime" label="结束钟点" />
        <el-table-column align="center" prop="bisOrderZt" label="订单状态">
          <template slot-scope="scope">
            {{ dict.label.ddzt[scope.row.bisOrderZt] }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="bisOrderServiceType" label="服务类型">
          <template slot-scope="scope">
            {{ dict.label.yllb[scope.row.bisOrderServiceType] }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <el-button
              :disabled="scope.row.bisOrderZt != '0'"
              size="mini"
              type="primary"
              @click="crud.toEdit(scope.row)"
            >分配护理员</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudWhfa from '@/api/business/orderhl'
import { getAllHlry } from '@/api/business/hlry'
import CRUD, { presenter, header, form } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import moment from 'moment'

const defaultForm = { bisOrderId: null, bisOrderHlyId: null, bisOrderHlyName: null }
export default {
  name: 'Whfa',
  components: { pagination, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm)],
  dicts: ['ddzt', 'yllb'],
  cruds() {
    return CRUD({ title: '维护方案', url: 'api/order', idField: 'bisOrderId', sort: 'bisOrderHlrq,desc', crudMethod: { ...crudWhfa }})
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now()
        }
      },
      bisZhsqSnryXm: '',
      pop: false,
      approveDialog: false,
      selectedZhids: [],
      bisGsglId: '',
      selectDate: new Date(),
      farq: '',
      whrqs: '',
      whfaFfxesChoose: [],
      viewCheckFwxm: [],
      fwxm: [],
      fwlx: [],
      fwsc: 0,
      scFlag: false,
      isEdit: false,
      hlyDialog: false,
      allHlry: [],
      permission: {
        add: ['admin', 'order:add'],
        edit: ['admin', 'order:edit'],
        del: ['admin', 'order:del']
      },
      rules: {
        bisWhfaStartTime: [
          { required: true, message: '起始钟点不能为空', trigger: 'blur' }
        ],
        bisWhfaEndTime: [
          { required: true, message: '结束钟点不能为空', trigger: 'blur' }
        ],
        bisWhfaFwlx: [
          { required: true, message: '服务类型不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.bisZhsqSnryXm = this.$route.query.bisZhsqSnryXm
    this.getAllHlry()
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      this.query.bisOrderZhid = this.$route.query.bisWhfaZhsqId
      this.query.bisOrderHlrq = moment(this.selectDate).format('YYYY-MM')
      return true
    },
    /**
     * 点击修改之前校验
     * @param crud
     * @param form
     * @returns {boolean}
     */
    [CRUD.HOOK.beforeToEdit](crud, form) {
      return true
    },
    change(e) {
      const tempHly = e.split('-')
      this.form.bisOrderHlyId = tempHly[0]
      this.form.bisOrderHlyName = tempHly[1]
      console.log(this.form)
    },
    // 获取弹窗内评估公司数据
    getAllHlry() {
      getAllHlry().then(res => {
        const templist = res.content
        for (const templistElement of templist) {
          console.log(templistElement)
          const xm = templistElement.bisRyglXm
          const key = templistElement.bisRyglId + '-' + templistElement.bisRyglXm
          this.allHlry.push({ key: key, name: xm })
        }
      }).catch(() => { })
    }
  }
}
</script>

<style scoped>

</style>
